<script setup>
import axios from 'axios';
import { ref } from 'vue'
import { useUrlStore } from '@/stores/url';
const UrlStore = useUrlStore()
import { showDialog } from 'vant';


const imageUrl = ref('');
const imgRef = ref(null);

showDialog({
      message: '滑动到最下方就能投递简历了哦！',
    }).then(() => {
      // on close
    });

showDialog({
      message: '滑动到最下方就能投递简历了哦！',
    }).then(() => {
      // on close
    });

// wx.request({
//   url: '/config/real',
//   method: 'GET',
//   success: function (res) {
//     const photoSrc = result.data.data.homePhoto;
//     imageUrl.value = UrlStore.url + '/' + photoSrc;
//   },
//   fail: function (error) {
//     console.error(error);
//   }
// })
  axios({
    url: 'http://175.178.62.164:61803/config/real',
  }).then(result => {
    const photoSrc = result.data.data.homePhoto
    imageUrl.value = UrlStore.url + '/' + photoSrc
  }).catch(err => {
    console.dir(err);
  });

//为了避免在图片尚未加载完成时显示"图片加载失败"，给 img 元素添加一个 hidden 类来将其隐藏，等图片加载完成之后再将其移除
const onImageLoad = () => {
  imgRef.value.classList.remove('hidden');
};


</script>

<template>
  <div class="bigBox">

    <van-dialog v-model:show="show" show-cancel-button>
    </van-dialog>

    <img ref="imgRef" alt="图片加载失败！" class="bgcImg hidden" @load="onImageLoad" :src="imageUrl">
    <h2>AchoBeta是谁?</h2>
    <div class="box1">
<p style="text-indent: 2em;">东莞理工学院AchoBeta网络安全创新实践实验室于2020年成立。该实验室由敖欣、赵海峰、黄斌等教师领导，学生自主运营管理，是校内颇具创新和创业精神的一个重要实验室。在这个实验室里，我们集结了学校里最充满互联网创新激情和专业精神的一群同学。我们以互联网创新实践为核心，采取多种方式，包括但不限于：开发具有广泛影响力、可供大众使用的产品，积极参与计算机相关的专业竞赛和技术交流活动等。通过不断提升自身的专业技能，我们已经构建起一个资源共享、信息互通、共同成长的创新学习社区。</p>
<p style="text-indent: 2em;">在实验室内部，我们孵化了多个创新项目，荣获多项国家级和省级荣誉奖项，同时，实验室的成员也成功就业或实习于腾讯、字节跳动、百度、快手等知名企业，得到了社会广泛的认可。</p>
    </div>


    <h2>团队荣誉</h2>
    <div class="box3">
      <h3 class="h3Title" style="background-color: rgb(255, 248, 149);">国家级</h3>
      <div class="honor">2019年全国微信小程序应用开发赛全国一等奖</div>
      <div class="honor">2020年中国大学生计算机设计大赛全国二等奖</div>
      <div class="honor">2020年中国大学生计算机设计大赛全国三等奖</div>
      <div class="honor">2020年大学生创新创业训练计划(国家级)立项</div>
      <div class="honor">2021年中国大学生计算机设计大赛全国三等奖</div>
      <div class="honor">2021年全国微信小程序应用开发赛全国三等奖</div>
      <div class="honor">2021年国青杯艺术设计大赛全国三等奖</div>
      <div class="honor">2023年中国大学生计算机设计大赛全国三等奖</div>

      <h3 class="h3Title" style="background-color: rgb(255, 248, 149);">省级</h3>
      <div class="honor">2020年中国大学生计算机设计大赛省一等奖</div>
      <!-- <div class="honor">2020年中国大学生计算机设计大赛省二等奖</div>
      <div class="honor">2020年中国大学生计算机设计大赛省三等奖</div> -->
      <div class="honor">2020年全国微信小程序应用开发赛华南赛区三等奖</div>
      <div class="honor">2020年大学生创新创业训练计划省级立项</div>
      <div class="honor">2021年全国微信小程序应用开发赛华南赛区一等奖</div>
      <div class="honor">2021年中国大学生计算机设计大赛省一等奖</div>
      <!-- <div class="honor">2021年中国大学生计算机设计大赛省二等奖</div> -->
      <div class="honor">2021年大学生创新创业训练计划划(省级)立项</div>
      <div class="honor">2022年中国大学生计算机设计大赛省三等奖</div>
      <div class="honor">2022年全国微信小程序应用开发赛华南赛区三等奖</div>
      <div class="honor">2023年中国大学生计算机设计大赛省二等奖</div>
      <!-- <div class="honor">2023年中国大学生计算机设计大赛省三等奖</div> -->

      <h3 class="h3Title" style="background-color: rgb(255, 248, 149);">校级</h3>
      <div class="honor">2020年东莞理工学院岭南股份奖学金</div>
      <!-- <div class="honor">2020年东莞理工学院E网争锋网页设计比赛一等奖</div> -->
      <!-- <div class="honor">2020年东莞理工学院E网争锋网页设计比赛二等奖</div> -->
      <div class="honor">2021年东莞理工学院E网争锋网页设计比赛一等奖</div>
      <div class="honor">2021年“互联网+”创新创业大赛校级三等奖</div>
      <!-- <div class="honor">2021年“互联网+“创新创业大赛校级优秀奖</div> -->
      <div class="honor">2021年大学生创新创业训练计划(校级)立项</div>
      <div class="honor">2021“挑战杯”大学生创新创业竞赛校三等奖(3个)</div>
      <div class="honor">2022年东莞理工学院网安微信小程序开发赛冠军</div>
      <div class="honor">2023年东莞理工学院网安微信小程序开发比赛一等奖</div>
      <!-- <div class="honor">2023年东莞理工学院网安微信小程序开发比赛二等级</div> -->
      <!-- <div class="honor">2023年东莞理工学院网安微信小程序开发比赛三等级</div> -->
    </div>

    <h2>招新岗位</h2>
    <div class="box2">
      <h3 class="h3Title">后端开发</h3>
      <h3>技能期待:</h3>
      <p style="text-indent: 1em;">1.掌握一门后端的编程语言，如go, Java，python等。</p>
      <p style="text-indent: 1em;">2.接触过Spring，SpringBoot， Gin， Django等常见的流行框架(加分项)。</p>
      <p style="text-indent: 1em;">3.思维敏捷、乐于探索、有毅力、有较强沟通能力、有基本的代码能力、有基本的源码阅读能力，有调试异常解决实际问题能力。</p>

      <h3 class="h3Title">前端开发</h3>
      <h3>技能期待:</h3>
      <p style="text-indent: 1em;">1.对HTML,CSS,JS有基本的了解，能够对页面实现简单的布局和交互。</p>
      <p style="text-indent: 1em;">2.接触或者使用过Vue，React，Angular等前端流行框架，有微信小程序开发能力与经验(加分项)。</p>
      <p style="text-indent: 1em;">3.对前端有浓厚的兴趣，有自己的学习目标和规划，有探索精神(加分项)。
      </p>
          
      <h3 class="h3Title">其他方向</h3>
      <h3>技能期待:</h3>    
      <p style="text-indent: 1em;">1.了解Python/C++等语言测试方向：了解或者接触过常见的软件测试流程以及测试方法，如基准测试等，对软件测试较为感兴趣。</p>
      <p style="text-indent: 1em;">2.网络安全方向：了解常见的网络安全知识以及网络攻击方式，如XSS，DDOS等，对于安全，渗透等方向感兴趣。</p>          
    </div>
    
   <!-- url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdadd0122365919e8&scope=snsapi_userinfo&redirect_uri=http://tgejcp.natappfree.cc/wxuser/getSignUpUserInfo#wechat_redirect" -->


    <van-button round type="success" color="rgb(25, 137, 250)" class="delivery" url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdadd0122365919e8&scope=snsapi_userinfo&response_type=code&redirect_uri=http://175.178.62.164:61803/wxuser/getSignUpUserInfo&expires_in=3600#wechat_redirect">投递简历</van-button>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.bigBox{
  position: relative;
  background-image: linear-gradient(
    #4993fa,
    #9dc6ff,
    #a0e4f1,
    #f1fafb
  );
}

.bgcImg {
  width: 375px;
}

.hidden{
  display: none;
}

h2{
  margin: 15px 25px;
  color:#fff ;
  text-shadow: 2px 2px 4px #000000;
}

.h3Title{
  margin: 15px auto 10px;
  width: 200px;
  height: 30px;
  background-color: #fff;
  text-align: center;
  line-height: 30px;
  box-shadow: 3px 3px 5px #535353;
  border-radius: 5px;
}

.honor{
  margin: 7px 20px;
  padding: 5px 5px;
  background-color: #fff;
  border-radius: 0 10px 0 10px ;
  box-shadow: 3px 3px 5px #535353;
}

.box1{
  box-sizing: border-box;
  padding: 20px 20px;
  width: 325px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 7px 7px 10px #535353;
}

.box2{
  box-sizing: border-box;
  padding: 0 20px 70px;
  width: 325px;
  margin: 0 auto;
  border-radius: 20px;
  border: #4993fa double 7px;
}

.delivery{
  position: absolute;
  bottom:5px;
  left:50%;
  transform: translate(-50%, -50%);
  width: 275px;
  /* display: flex;
  padding: 0 75px 0 75px;
  margin: 20px auto;
  justify-content: center; */
}
</style>